<template>
    <div>
        <van-nav-bar title="选择手工圈" right-text="完成" @click-left="onClickLeft" @click-right="onClickRight" />
        <div class="sel_quan">
            <span style="font-size: 14px;color: rgb(198, 198, 198);">只能发布到一个圈子</span>
            <div class="xuan_lei">
                <!-- <van-space> -->
                <div style="display: inline-block; margin:10px 27px;" v-for="(item,index) in all_list" :key="index">
                    <van-button type="default" @click="sel_one(index)" :class="{xuan:is_sel_index === index}">
                        {{item}}
                    </van-button>
                </div>

                <!-- </van-space> -->

            </div>
        </div>


    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const onClickLeft = () => history.back();
const onClickRight = () => {
    // console.log("完成");
    router.push({
        name: 'fawen',
        query: {
            is_sel: all_list[is_sel_index.value]
        }
    })
    console.log(all_list[is_sel_index.value]);


}
var is_sel_index = ref(-1)

//按钮数据
let all_list = [
    "布艺",
    "皮艺",
    "木艺",
    "发饰",
    "刺绣",
    "剪纸"
]

function sel_one(index: any) {
    console.log(index);
    is_sel_index.value = index

}

</script>

<style scoped>
:deep(.van-nav-bar__text) {
    color: black;
}

.sel_quan {
    padding: 10px;
    height: 89.5vh;
    background-color: rgb(243, 243, 243);
    /* border: 1px solid red; */
}

.xuan {
    border: 1px solid red;
}

.xuan_lei {
    width: 94vw;
    /* display: flex; */
    /* justify-content: space-around; */
    /* height: 1vh; */
    /* display: flex; */
    /* border: 1px solid red; */
}
</style>
